<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-04-25 11:28:11
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-04-25 13:22:13
 * @FilePath: /meeting-minutes-h5/src/components/ConferenceMinutes/customerView/selectCustomerTypeView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <van-popup v-model:show="showBottom" teleport="#minutesPage" position="bottom" round>
    <div class="flex flex-col h-full justify-between">
      <div class="text-center py-4 font-bold">新建客户</div>
      <div class="flex-auto overflow-y-auto pb-8 px-4">
        <div v-if="list.length" class="flex flex-row items-center py-4">
          客户类型
          <div class="bg-red-500 w-1 h-1 rounded-full ml-1"></div>
        </div>
        <template v-if="list.length" v-for="item of list" :key="item">
          <div class="flex flex-row items-center mb-4" @click="onSelectBox(item)">
            <img
              v-if="selected(item)"
              src="https://meetcdn.yxt.com/lingxi-static-resources/img/checked_icon.svg"
              alt="选中"
            />
            <img
              v-else
              src="https://meetcdn.yxt.com/lingxi-static-resources/img/uncheck_icon.svg"
              alt="未选"
            />
            <div class="ml-2">{{ item.name || "" }}</div>
          </div>
        </template>
        <van-empty v-else description="暂无客户类型"></van-empty>
      </div>

      <div class="px-4 py-4">
        <van-button
          size="large"
          :disabled="!currentItem"
          round
          color="#436BFF"
          @click="onConfirm"
          >确定</van-button
        >
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, defineProps, defineExpose, defineEmits } from "vue";
import { showToast } from "vant";

const props = defineProps({
  list: {
    type: Array,
  },
});

const emits = defineEmits(["confirm"]);

const selected = (v) => {
  if (!currentItem.value) return false;
  return currentItem.value.id === v.id;
};
const currentItem = ref();

function onSelectBox(item) {
  currentItem.value = item;
}

function onConfirm() {
  emits("confirm", currentItem.value);
  hidden();
}

// 控制显示隐藏相关
const showBottom = ref(false);

function show() {
  showBottom.value = true;
}

function hidden() {
  showBottom.value = false;
}

defineExpose({
  show,
  hidden,
});
</script>

<style scoped lang="less"></style>
